<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p1_CSS的三种位置</title>
    <!-- 外部样式:引入外部的CSS文件
         一个CSS文件可以被多个html引入 谁引入，谁生效
          rel="stylesheet" 必写属性,表名当前引入的文件是样式文件-->
    <link rel="stylesheet" href="01.css">
    <!-- 内部样式:把style标签放在head标签中,内部的CSS对当前的页面生效-->
    <style>
        /* 标签名选择器:选中所有的p元素 */
        p {
            color: blue;
        }

        h4 {
            color: blue;
            background-color: bisque;
            width: 300px;
            height: 50px;
        }

        h2 {
            color: blue;
            background-color: bisque !important;
        }
    </style>

</head>
<body>
<!-- 行内样式:加在当前元素上 只对当前行元素生效 -->
<h4 style="color: red; background-color:yellow">刘武雄标题</h4>
<h4>刘武雄标题2</h4>
<p>rose</p>
<p>jack</p>
<p>your</p>
<p>tom</p>
<hr>
<br>
<div>刘武雄</div>
<div>刘武雄</div>
<div>刘武雄</div>
<div>刘武雄</div>
<hr>
<!-- 优先级是行内样式 > 内部样式=外部样式 -->
<h2 >CSS优先级</h2>
</body>
</html>